<template>
  <div style="background-color: #ffffff;border-radius: 4px;margin-left: 20px;margin-right: 20px">
    <div style="font-size: 20px;padding-left: 16px;padding-right: 16px;padding-top: 16px">概览</div>
    <divider></divider>
    <div style="padding-left: 16px;padding-right: 16px;display: flex">
      <div style="flex: 2;display: flex;flex-direction: column">
        <span style="font-size: 16px;line-height: 32px">API接口地址</span>
        <div style="height: 240px;border: 1px solid rgba(0,0,0,0.1);margin-top: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center">
          <span style="font-size: 20px">已建地址：
            <span style="color: #2db7f5">2</span>
            个
          </span>
          <Button type="primary" size="large" style="width: 100px;border-radius: 0;margin-top: 10px;font-size: 16px">管理地址</Button>
          <Button type="primary" size="large" style="width: 100px;border-radius: 0;margin-top: 10px;font-size: 16px">新建地址</Button>
        </div>
      </div>
      <div style="flex: 5;display: flex;flex-direction: column;padding-left: 26px">
        <div style="overflow: hidden;line-height: 32px">
          <span style="font-size: 16px;float: left">用量</span>
          <span style="float: left;color: #f38900;background-color: rgba(255,159,0,0.1);font-size: 16px;margin-left: 10px;padding-left: 6px;padding-right: 6px">数据约有15分钟延迟，如有任何疑问或需求</span>
          <Date-picker type="daterange" confirm placement="bottom-end" placeholder="选择日期" style="width: 200px;float: right;height: 32px;margin-left: 4px"></Date-picker>
          <span style="font-size: 16px;float: right">请选择时间段</span>
        </div>
        <Table :row-class-name="rowClassName" :columns="columns1" :data="data1" size="large" style="margin-top: 20px;height:240px ">
          <template slot-scope="{ row, index }" slot="action">
            <a>查看</a>
          </template>
        </Table>
      </div>
    </div>

    <div style="padding-left: 16px;padding-right: 16px;margin-top: 20px;display: flex;flex-direction: column">
      <span style="font-size: 16px">可用服务列表</span>
      <div style="display: flex;margin-top: 10px">
        <Radio-group v-model="button1" type="button" size="large" style="height: 30px">
          <Radio label="分心驾驶检测"></Radio>
          <Radio label="疲劳驾驶检测"></Radio>
        </Radio-group>
        <div style="margin-left: 80px;">
          <span style="font-size: 16px;line-height: 30px">访问URL：</span>
          <Input v-model="url" size="large" placeholder="large size" disabled style="width: 300px"></Input>
        </div>

      </div>
      <Table :row-class-name="rowClassName" :columns="columns2" :data="data2" size="large" style="margin-top: 20px;height:240px ">
<!--        <template slot-scope="{ row, index }" slot="action">-->
<!--          <a>查看</a>-->
<!--        </template>-->
      </Table>
    </div>
    <divider></divider>
<!--    <Card>-->
<!--      <divider></divider>-->
<!--      <Row >-->
<!--        <Select v-model="model1" style="width:200px">-->
<!--          <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
<!--        </Select>-->
<!--        <Input v-model="value" placeholder="请输入..." style="width: 300px;margin-left: 30px"></Input>-->
<!--        <Select v-model="model1" style="width:200px;margin-left:30px">-->
<!--          <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
<!--        </Select>-->
<!--        <Button type="primary" style="margin-left: 30px">测试</Button>-->
<!--      </Row>-->

<!--      <Table :row-class-name="rowClassName" :columns="columns1" :data="data1" style="margin-top: 30px"></Table>-->
<!--    </Card>-->
  </div>
</template>

<script>
export default {
  name: "API-setting",
  data(){
    return {
      url:'http://46w0f65787.zicp.vip/dms/login',
      button1:'分心驾驶检测',
      columns1: [
        {
          title: 'API',
          key: 'api',
          className:'title'
        },
        {
          title: '调用量',
          key: 'total',
          className:'title'
        },
        {
          title: '调用失败',
          key: 'fail',
          className:'title'
        },
        {
          title: '失败率',
          key: 'failRate',
          className:'title'
        },
        {
          title: '详细统计',
          key: 'action',
          className:'title',
          slot:'action'
        },

      ],

      data1: [
        {
          api: '分心驾驶检测',
          total: 20,
          fail: 2,
          failRate: '10%'
        },
        {
          api: '疲劳驾驶检测',
          total: 20,
          fail: 2,
          failRate: '10%'
        },
      ],

      columns2: [
        {
          title: '检测类型',
          key: 'api',
          className:'title'
        },
        {
          title: '调用量',
          key: 'total',
          className:'title'
        },
        {
          title: '调用失败',
          key: 'fail',
          className:'title'
        },
        {
          title: '失败率',
          key: 'failRate',
          className:'title'
        },
        {
          title: '详细统计',
          key: 'action',
          className:'title',
          slot:'action'
        },

      ],

      data2: [
        {
          api: '抽烟',
          total: 20,
          fail: 2,
          failRate: '10%'
        },
        {
          api: '打电话',
          total: 20,
          fail: 2,
          failRate: '10%'
        },

      ],

     }
  },
  methods: {
    rowClassName (row, index) {
      // if (index === 0) {
      //   return 'demo-table-title-row';
      // }else if (index === 1) {
      //   return 'demo-table-info-row';
      // } else if (index === 3) {
      //   return 'demo-table-error-row';
      // }
      return '';
    }
  }
}
</script>

<style >
.ivu-table th.title {
  background: #f6f7fb;

  font-size: 14px;
  font-weight: normal;
}
  .ivu-table .demo-table-info-row td{
    background-color: #2db7f5;
    color: #fff;
  }
  .ivu-table .demo-table-error-row td{
    background-color: #ff6600;
    color: #fff;
  }
  .ivu-table .demo-table-title-row td{
    background-color: #ff6600;
    color: #fff;
  }
  .ivu-table td.demo-table-info-column{
    background-color: #2db7f5;
    color: #fff;
  }
  .ivu-table .demo-table-info-cell-name {
    background-color: #2db7f5;
    color: #fff;
  }
  .ivu-table .demo-table-info-cell-age {
    background-color: #ff6600;
    color: #fff;
  }
  .ivu-table .demo-table-info-cell-address {
    background-color: #187;
    color: #fff;
  }
</style>
